<template>
	<div class="vip-row">
		<div class="xp">
			<div class="flex items-center" style="min-width: 80px; flex-shrink: 0; gap: 8px">
				<n-image
					v-if="icon"
					width="30"
					:src="icon"
					fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
				<span style="font-size: 14px; white-space: nowrap">{{ title }}1</span>
			</div>
			<div v-if="top" style="margin-left: 10px; display: flex">
				<base-icon v-if="!lock" name="privacy" color="#F80563" class="icon-2" />
				<div v-else class="icon-2">
					<base-image :src="'activity/reward/unlock.svg'"></base-image>
				</div>

				<base-icon
					:style="show && 'transform: rotate(180deg);'"
					name="down"
					color="white"
					class="icon-2" />
			</div>
		</div>
		<div v-show="!show" class="xp flex justify-center items-center" style="color: #bbc5c7">
			{{ xp }}
		</div>
		<div v-show="!show" v-for="(feature, index) in features" :key="index" class="feature">
			<span v-if="feature === 'check'" class="check-icon">
				<base-icon name="tick" class=""></base-icon>
			</span>
			<span v-else>{{ feature }}</span>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { BaseIcon, BaseImage } from '@/components/base'
import { isPC } from '@/utils'

export default defineComponent({
	methods: {
		isPC
	},
	components: { BaseImage, BaseIcon },
	props: {
		top: {
			type: Boolean,
			required: false,
			default: false
		},
		lock: {
			type: Boolean,
			required: false,
			default: false
		},
		show: {
			type: Boolean,
			required: false,
			default: false
		},
		title: {
			type: String,
			required: true
		},
		icon: {
			type: String,
			required: true
		},
		xp: {
			type: String,
			required: true
		},
		features: {
			type: Array as PropType<(string | number)[]>,
			required: true
		}
	}
})
</script>

<style scoped>
.vip-row {
	display: flex;
	padding: 10px 12px;
	align-items: center;
	background-color: #1b2538;
	width: 100%;
	color: #ffffff;
}

.icon {
	width: 24px;
	height: 24px;
	margin-right: 10px;
}

.icon-2 {
	width: 20px;
	height: 20px;
	margin-left: 4px;
}

.xp {
	flex: 1;
	text-align: center;
	font-size: 0.875rem;
	font-weight: bold;
	width: calc(100% / 8);
	display: flex;
	align-items: center;
}

.feature {
	width: calc(100% / 8);
	text-align: center;
	font-size: 0.875rem;
	color: #bbc5c7;
}

.check-icon {
	color: #4caf50;
	font-weight: bold;
}
</style>
